<script setup lang="ts">
defineOptions({
  name: "consumeStatistcs"
});

import { ref, computed, inject } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import fabBoardDetail from "./fabBoardDetail/index.vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { useLabelLayoutConsumeGWFn, useLabelLayoutEmissionAndRecoveryGWMFn, useLabelLayoutElectricityConsumeMEFn } from "./barEchartsHooks";
import { useLabelLayoutMachineConsumeMEFn, useLabelLayoutTotalEConsumeEFn, useLabelLayoutWaterEmissionFn } from "./lineEchartsHooks";
import type { GetOptionsCallBackType } from "@/views/common/components/types";
import { type SubjectType } from "@/utils/types";

const subject = inject("subject", ref<SubjectType>("MACHINE"));
const routerStore = useRouterStoreHook();
const detailTitle = ref<string>("");
const dialogVisible = ref<boolean>(false);
const detailIndex = ref<number>(1);
const width = ref<number>(620);
const height = ref<number>(300);

const title_1 = computed(() => {
  switch (subject.value) {
    case "WATER":
      return "用水统计";
    case "MACHINE":
      return "PCW用量统计";
    case "ELECTRICTITY":
      return "总用电统计";
    case "GAS":
      return getGasTitle(1);
    default:
      return "";
  }
});

const title_2 = computed(() => {
  switch (subject.value) {
    case "WATER":
      return "废水排放统计";
    case "MACHINE":
      return "工艺废气排放统计";
    case "ELECTRICTITY":
      return "总体供电情况";
    case "GAS":
      return getGasTitle(2);
    default:
      return "";
  }
});

const getGasTitle = (t: number) => {
  switch (routerStore.activeViceMenu) {
    case "SPECIALTY":
      return t === 1 ? "特气使用统计" : "废气排放统计";
    case "ATMOSPHERIC":
      return t === 1 ? "大宗气体使用统计" : "废气排放统计";
    case "CHEMICALS":
      return t === 1 ? "化学品使用统计" : "废气排放统计";
  }
};

const labelLayoutStatistcsFn = async ec => {
  switch (subject.value) {
    case "WATER":
      return await useLabelLayoutMachineConsumeMEFn(subject.value, "t", true);
    case "MACHINE":
      return await useLabelLayoutMachineConsumeMEFn(subject.value, "t");
    case "ELECTRICTITY":
      return await useLabelLayoutElectricityConsumeMEFn("KW/h");
    case "GAS":
      if (routerStore.activeViceMenu === "CHEMICALS") {
        return await useLabelLayoutConsumeGWFn(subject.value, "t");
      } else {
        return await useLabelLayoutConsumeGWFn(subject.value, "m³");
      }
  }
};

const labelLayoutStatistcsFn2 = async ec => {
  switch (subject.value) {
    case "WATER":
      return await useLabelLayoutWaterEmissionFn("t");
    case "MACHINE":
      return await useLabelLayoutEmissionAndRecoveryGWMFn(subject.value, "m³", true);
    case "ELECTRICTITY":
      return await useLabelLayoutTotalEConsumeEFn("V");
    case "GAS":
      if (routerStore.activeViceMenu === "CHEMICALS") {
        return await useLabelLayoutEmissionAndRecoveryGWMFn(subject.value, "t");
      } else {
        return await useLabelLayoutEmissionAndRecoveryGWMFn(subject.value, "m³");
      }
  }
};

const getEchartsInstanceFn = (eci: any, cb: GetOptionsCallBackType) => {
  if (!eci) return null;
  if (subject.value === "WATER") return null;
  eci.off("click");
  eci.on("click", "series.line", async ({ seriesName = "" }: any) => {
    const o = await useLabelLayoutTotalEConsumeEFn("V", seriesName);
    cb && cb(o);
    return false;
  });
};

const clickHandler = (n: number, title: string) => {
  detailIndex.value = n;
  detailTitle.value = title;
  dialogVisible.value = true;
};
</script>

<template>
  <div class="use-statistcs">
    <echartsChart
      :boxShadow="false"
      :title="`今日机台${title_1}`"
      :width="width"
      :height="height"
      button="详情"
      :labelLayoutFn="labelLayoutStatistcsFn"
      @btn-click="clickHandler(1, title_1)"
    />
    <echartsChart
      :boxShadow="false"
      :title="`今日机台${title_2}`"
      :width="width"
      :height="height"
      button="详情"
      :labelLayoutFn="labelLayoutStatistcsFn2"
      :getEchartsInstance="getEchartsInstanceFn"
      @btn-click="clickHandler(2, title_2)"
    />
    <fabBoardDetail v-if="dialogVisible" v-model="dialogVisible" :index="detailIndex" :title="`今日机台${detailTitle}`" />
  </div>
</template>

<style lang="scss" scoped>
.use-statistcs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
